<script setup lang="ts">
// 直接从 vite3-vue3 粘贴过来的，有点懒了不想再写一边了
const menuList = ref([
  { title: 'home', path: '/home' },
  {
    title: 'index',
    path: '/',
    anchorList: [
      { title: 'id0', anchor: '/#id0' },
      { title: 'id1', anchor: '/#id1' },
      { title: 'id2', anchor: '/#id2' },
      { title: 'id3', anchor: '/#id3' },
      { title: 'id4', anchor: '/#id4' },
      { title: 'id5', anchor: '/#id5' },
    ],
  },
  {
    title: 'about',
    path: '/about',
    anchorList: [
      { title: 'id1', anchor: '/about#id1' },
      { title: 'id2', anchor: '/about#id2' },
      { title: 'id3', anchor: '/about#id3' },
      { title: 'id4', anchor: '/about#id4' },
      { title: 'id5', anchor: '/about#id5' },
    ],
  },
  { title: 'other', path: '/other' },
])

const hoverIndex = ref(-1)
const handleMouseEnter = (index: number) => hoverIndex.value = index
const handleMouseLeave = () => hoverIndex.value = -1
</script>

<template>
  <header class="w-[100%] h-70px fixed top-0 left-0 z-5">
    <section class="h-[100%] max-w-900px min-w-600px mx-auto flex justify-between">
      <section class="flex items-center">
        <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-34px"><g clip-path="url(#a)"><path fill="currentColor" d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z" fill="#80EEC0"></path> <path d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z" fill="#00DC82"></path></g> <defs><clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"></path></clipPath></defs></svg>
      </section>
      <section class="min-w-400px h-[100%]">
        <ul class="h-[100%] flex justify-between">
          <li v-for="(menu, menuIndex) in menuList" 
            @mouseenter="handleMouseEnter(menuIndex)"
            @mouseleave="handleMouseLeave"
            class="h-[100%] text-20px font-bold text-white relative">
            <NuxtLink :to="menu.path" class="h-[100%] flex items-center">
              {{menu.title}}
              <!-- 如果有二级菜单并且二级菜单数量大于0 显示图标 -->
              <template v-if="menu.anchorList && menu.anchorList.length">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="w-14px h-14px ml-4px fill-white" data-v-13a8b3e6=""><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z" /></svg>
              </template>
            </NuxtLink>

            <!-- 如果有二级菜单并且二级菜单数量大于0 显示二级菜单 -->
            <template v-if="menu.anchorList && menu.anchorList.length">
              <Transition name="scroll-y-transition">
                <ul v-if="hoverIndex === menuIndex" class="bg-white absolute top-55px left-[-30px] min-w-160px py-12px pl-26px rounded-8px ">
                  <li v-for="anchor in menu.anchorList" :key="anchor.title" class="text-[#777777] !leading-40px text-18px hover:text-20px">
                    <NuxtLink :to="anchor.anchor">
                      {{ anchor.title }}
                    </NuxtLink>
                  </li>
                </ul>
              </Transition>
            </template>
          </li>
        </ul>
      </section>
    </section>
  </header>
</template>

<style scoped>
.scroll-y-transition-enter-active,
.scroll-y-transition-leave-active {
    transition: .3s cubic-bezier(.25,.8,.5,1)!important
}

.scroll-y-transition-enter-from,
.scroll-y-transition-leave-from {
    transition: transform .6s
}

.scroll-y-transition-enter-from,
.scroll-y-transition-leave-to {
    opacity: 0
}

.scroll-y-transition-enter-from {
    transform: translateY(-15px)
}

.scroll-y-transition-leave-to {
    transform: translateY(15px)
}
</style>